<template>
<div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
        <el-form :inline="true" :model="filters" :size="size" ref="filters">
            <el-row class="search-input">
                <el-form-item prop="title" label="标题：">
                    <el-input v-model="filters.title" placeholder="标题" clearable></el-input>
                </el-form-item>
                <el-form-item prop="status" label="状态：">
                    <el-select v-model="filters.status" style="width: 200px;" placeholder="状态" clearable>
                        <el-option label="未发布" value="1"></el-option>
                        <el-option label="已发布" value="2"></el-option>
                    </el-select>
                </el-form-item>
              <el-form-item label="创建时间：" prop="createTime">
                <el-date-picker
                  v-model="filters.createTime"
                  style="width:100%"
                  type="datetime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
            </el-row>
            <el-row class="search-button">
                <el-form-item>
                    <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-plus" :label="$t('action.add')" type="primary" @click="handleAdd" />
                </el-form-item>
            </el-row>
            <el-form-item class="t_r w100">
                <el-button-group>
                    <el-tooltip content="刷新" placement="top">
                        <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
                    </el-tooltip>
                    <el-tooltip content="列显示" placement="top">
                        <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
                    </el-tooltip>
                    <el-tooltip content="导出" placement="top">
                        <el-button icon="fa fa-file-excel-o" @click="downloadExcel" id="downloadExcel"></el-button>
                    </el-tooltip>
                </el-button-group>
            </el-form-item>
            <!--表格显示列界面-->
            <table-column-filter-dialog
              ref="tableColumnFilterDialog"
              :columns="columns"
              @handleFilterColumns="handleFilterColumns"></table-column-filter-dialog>
        </el-form>
    </div>
    <!--表格内容栏-->
    <cy-table
    :height="350"
    ref="CyTable"
    :data="pageResult"
    :columns="filterColumns"
    :showBatchDelete="false"
    :conceal="true"
    @findPage="findPage"
    @handleEdit="handleEdit"
    @handleDelete="handleDelete"
    @Auditmethods="Auditmethods"
    @selectionChange="selectionChange">
    </cy-table>
    <!--新增编辑界面-->
    <el-dialog :title="operation?'新增':'编辑'" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
        <el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right">
            <el-row class="searchDialog-input">
                <el-form-item label="标题：" prop="title">
                    <el-input v-model="dataForm.title" auto-complete="off" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="简述：" prop="introduction">
                    <el-input type="textarea" v-model="dataForm.introduction" auto-complete="off" maxlength="300" placeholder="请输入简述"></el-input>
                </el-form-item>
                <el-form-item label="状态：" prop="status">
                    <el-select v-model="dataForm.status" placeholder="请输入状态" style="width: 100%">
                      <el-option v-for="item in statusList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                        <!-- <el-option label="未发布" :value="1"></el-option>
                        <el-option label="已发布" :value="2"></el-option> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="条款内容：" prop="context">
                    <quill-editor v-model="dataForm.context" ref="myQuillEditor" style="height: 300px;" :options="editorOption"></quill-editor>
                </el-form-item>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="padding-top:60px;">
            <el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
            <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
        </div>
    </el-dialog>
    <!--审核界面-->
    <el-dialog :title="audit" width="40%" :visible.sync="verifytime" :close-on-click-modal="false">
        <el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right">
            <el-row class="searchDialog-input">

                <el-form-item label="审核状态：" prop="auditStatus">
                    <el-select v-model="dataForm.auditStatus" placeholder="请选择审核状态" style="width: 50%">
                        <el-option label="审核通过" :value="1"></el-option>
                        <el-option label="审核拒绝" :value="2"></el-option>
                    </el-select>
                </el-form-item>

            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="padding-top:60px;">
            <el-button :size="size" @click.native="verifytime = false">{{$t('action.cancel')}}</el-button>
            <el-button :size="size" type="primary" @click.native="reviewsubmitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/JicTable";
import KtButton from "@/views/Core/KtButton";
import {
    quillEditor
} from "vue-quill-editor";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import {
    format
} from "@/utils/datetime";
import {
    exportExcel
} from "@/utils/excel";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
    components: {
        PopupTreeInput,
        CyTable,
        KtButton,
        TableColumnFilterDialog,
        quillEditor
    },
    data() {
        return {
            size: "small",
            filters: {
                title: "",
                status: ""
            },
            statusList: [
              {
                value: '1',
                label: '未发布'
              }, {
                value: '2',
                label: '已发布'
              }
            ],
            columns: [{
                    prop: "id",
                    label: "ID",
                    minWidth: 50
                },
                {
                    prop: "title",
                    label: "标题",
                    minWidth: 120
                },
                {
                    prop: "introduction",
                    label: "简述",
                    minWidth: 180
                },
                {
                    prop: "status",
                    label: "状态",
                    minWidth: 120,
                    formatter: this.showStatusType
                },
                {
                    prop: "auditStatus",
                    label: "审核状态",
                    minWidth: 120,
                    formatter: this.statusDisplay
                },
                {
                    prop: "creatorName",
                    label: "创建人",
                    minWidth: 120
                },
                {
                    prop: "createTime",
                    label: "创建时间",
                    minWidth: 120
                },

            ],
            filterColumns: [],
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            },
            pageResult: {},
            options: {},
            editorOption: {},
            operation: false, // true:新增, false:编辑
            dialogVisible: false, // 新增编辑界面是否显示
            verifytime: false, // 审核界面
            editLoading: false,
            audit: false,
            dataFormRules: {
                title: [{
                    required: true,
                    message: "请输入标题",
                    trigger: "blur"
                }],
                introduction: [{
                    required: true,
                    message: "请输入内容",
                    trigger: "blur"
                }],
                status: [{
                    required: true,
                    message: "请选择状态",
                    trigger: "blur"
                }],
                auditStatus: [{
                    required: true,
                    message: "请选择审核状态",
                    trigger: "blur"
                }]
            },
            //选中ID Array
            idArray: [],
            // 新增编辑界面数据
            dataForm: {
                id:"",
                title: "",
                context: "",
                status: "",
                auditStatus: ""
            }
        };
    },
    methods: {
      // 获取分页数据
      findPage: function (data) {
        let this_ = this;
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {};
        }
        this_.filters.start = this.pageRequest.pageNum;
        this_.filters.limit = this.pageRequest.pageSize;
        this.utils.request.querySysNoticeList(this_.filters, function (res) {
          if (res.data.rows == null) {
            res.data.rows = [];
          }
          this_.$refs.CyTable.findPage({
            content: res.data.rows,
            total: res.data.total
          });
        });
      },

      //数据勾选
      selectionChange(data) {
        console.log(data);
        this.idArray = data.selections;
      },
      //列表状态处理
      showStatusType(row, column, cellValue, index) {
        if (row.status == 1) {
          return "未发布";
        } else if (row.status == 2) {
          return "已发布";
        }
      },
      //列表状态处理
      statusDisplay(row, column, cellValue, index) {
        if (row.auditStatus == 1) {
          return "审核通过";
        } else if (row.auditStatus == 2) {
          return "审核拒绝";
        }
      },
      // 删除
      handleDelete: function (data) {
        var params = {};
        params.id = data.params[0].id;
        var this_ = this;
        this.utils.request.deleteSysNoticeInfo(params, function (res) {
          if (res.code == "0000") {
            this_.$message({
              message: "操作成功",
              type: "success"
            });
            this_.findPage(null);
          } else {
            this_.$message({
              message: "操作失败, " + res.msg,
              type: "error"
            });
          }
        });
      },
      // 显示新增界面
      handleAdd: function () {
        this.dialogVisible = true;
        this.operation = true;
        this.dataForm = {};
        this.dataForm.status = this.statusList[0].value;
        this.$nextTick(() => {
          this.$refs["dataForm"].resetFields();
        });
      },
      // 显示审核界面
      Auditmethods: function (params) {
        this.verifytime = true;
        this.audit = "审核";
        this.dataForm = Object.assign({}, params.row);
      },
      //列表下载
      downloadExcel() {
        this.$confirm("确定下载列表文件?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let filename = "产品信息";
            this.$refs.CyTable.exportData(
              this.filters,
              this.filterColumns,
              filename
            );
          })
          .catch(() => {
          });
      },
      // 显示编辑界面
      handleEdit: function (params) {
        console.log(params);
        this.dialogVisible = true;
        this.operation = false;
        this.dataForm = Object.assign({}, params.row);
        this.$nextTick(() => {
          this.$refs["dataForm"].resetFields();
        });
      },
      // 编辑
      submitForm: function () {

        this.$refs.dataForm.validate(valid => {
          if (valid) {
            let this_ = this;
            this.editLoading = true;
            let params = Object.assign({}, this.dataForm);
            this.utils.request.editSysNotice(params, function (data) {
              if (data.code == "0000") {
                this_.$message({
                  message: "操作成功",
                  type: "success"
                });
                this_.dialogVisible = false;
                this_.$refs["dataForm"].resetFields();
              } else {
                this_.$message({
                  message: "操作失败, " + data.msg,
                  type: "error"
                });
              }
              this_.findPage();
              this_.dialogVisible = false;
              this_.operation = false;
              this_.editLoading = false;
            });
          }
        });
      },
      // 审核
      reviewsubmitForm: function () {

        this.$refs.dataForm.validate(valid => {
          if (valid) {
            let this_ = this;
            this.editLoading = true;
            let params = Object.assign({}, this.dataForm);
            this.utils.request.modifyTheAudit(params, function (data) {
              if (data.code === "0000") {
                this_.$message({
                  message: "操作成功",
                  type: "success"
                });
                this_.verifytime = false;
                this_.$refs["dataForm"].resetFields();
              } else {
                this_.$message({
                  message: "操作失败, " + data.msg,
                  type: "error"
                });
              }
              this_.findPage();
              this_.verifytime = false;
              this_.audit = false;

              this_.editLoading = false;
            });
          }
        })
        },

        //启用停用
        editStatus: function () {
            if (this.idArray.length != 1) {
                this.$message({
                    message: "请选择一条数据进行处理, ",
                    type: "error",
                    center: true,
                    offset: 250,
                    duration: 1000
                });
            } else {
                let params = {};
                params.id = this.idArray[0].id;
                if (this.idArray[0].status == '1') {
                    params.status = '2';
                } else if (this.idArray[0].status == '2') {
                    params.status = '1';
                }
                var this_ = this;
                this.utils.request.editSysNotice(params, function (res) {
                    this_.$message({
                        message: '操作成功',
                        type: 'success',
                        center: true,
                        offset: 250,
                        duration: 1000
                    });
                    this_.findPage(null);
                });
            }
        },
        // 时间格式化
        dateFormat: function (row, column, cellValue, index) {
            return format(row[column.property]);
        },
        // 处理表格列过滤显示
        displayFilterColumnsDialog: function () {
            this.$refs.tableColumnFilterDialog.setDialogVisible(true);
        },
        // 处理表格列过滤显示
        handleFilterColumns: function (data) {
            this.filterColumns = data.filterColumns;
            this.$refs.tableColumnFilterDialog.setDialogVisible(false);
        },
        // 处理表格列过滤显示
        initColumns: function () {
            var temp = [];
            $.each(this.columns, function (key, val) {
                temp.push(val);
            });
            this.filterColumns = temp;
        },
        resetForm(formName) {
            if (this.$refs[formName] != undefined) {
                this.$refs[formName].resetFields();
                this.findPage(null);
            }
        }
    },

    mounted() {
        this.initColumns();
    }
};
</script>

<style lang='scss' scoped>
</style>
